<template>
    <div class="main_wrapper">
        <!-- <li> -->
            <div :class="{bold: isFolder,tr:true}" @click.stop="toggleItem(item)">
                <span v-if="isFolder&&isOpen" class="iconfont">&#xe603;</span>
                <span v-if="isFolder&&!isOpen" class="iconfont">&#xe601;</span>
                {{ item.name }}
                <input class="selecet_depart" name='department' type="radio" v-model="depart" :value='item.id' @click.stop="toggleItem(item)"/>
            </div>
            <ul v-show="isOpen" v-if="isFolder">
                <tree-item
                    class="item"
                    v-for="(child, index) in item.children"
                    :key="index"
                    :item="child"
                    @get_department="getDepartment"
                ></tree-item>
            </ul>
        <!-- </li> -->
    </div>
</template>
<script>
    let _this = null;
    export default {
        name:'tree-item',
        props: {
            item: Object,
            selectDepartments:Object
        },
        data: function () {
            return {
            menuTree:[],
            classAll:false,
            isOpen: false,
            show:false,
            curDepartment:'',
            depart:'0',
            department:{}
            }
        },
        computed: {
            isFolder: function () {
                return this.item.children && this.item.children.length
            }
        },
        watch:{
            selectDepartments: function(){
            },
        },
        methods: {
            clearCheck(){
                let radios=document.getElementsByClassName("selecet_depart");
                for(let i=0; i < radios.length; i++){ 
                    radios[i].checked = false; 
                }
            },
            toggleItem(data) {
                if (this.isFolder) {
                    this.isOpen = !this.isOpen;
                }
                    this.depart = '';
                    this.department = data;
                    this.depart = data.id
                    this.$emit('get_department',this.department)
                
            },
            toggle(data) {
                if(data.id=='1'){
                    this.isOpen = false
                }
                if (this.isFolder) {
                    this.isOpen = !this.isOpen;
                }
                if(data.hasOwnProperty("children")){
                    this.classAll = true
                }else{
                    this.classAll = false
                }
                this.depart = '';
                this.department = data;
                this.depart = data.id
                this.$emit('get_department',this.department)
            },
            getDepartment: function(data){
                let params = data
                params.classAll = this.classAll
                
                this.$emit('get_department',params)
            },
        },
        created: function(){
            // let departmentLevel = []
            // if(this.selectDepartments != undefined){
            //     departmentLevel = this.selectDepartments.departmentLevel
            //     this.depart = this.selectDepartments.id
            //     localStorage.setItem('departmentLevel',JSON.stringify(this.selectDepartments))
            // }else{
            //     let selectDepart = JSON.parse(localStorage.getItem('departmentLevel'))
            //     departmentLevel = selectDepart.departmentLevel
            //     this.depart = selectDepart.id
            // }
            // if(departmentLevel.indexOf(this.item.id) != -1 || this.item.id == undefined){
            //     this.isOpen = true;
            // }
            // _this = this
        }
    }
</script>
<style lang="less" scoped>
    @import '../../styles/iconfont.css';
    body {
        font-family: Menlo, Consolas, monospace;
        color: #fff;
        font-size: 16px;
    }
    .main_wrapper{
        color: #fff;
        width: 100%;
        background-color:#292A4D;
        z-index: 9999;
        font-size: 16px;
    }
    .item {
        cursor: pointer;
    }
    .bold {
        line-height: 3em;   
    }
    .tr{
        position: relative;
    }
    ul {
        padding-left: 15px;
        line-height: 3em;
        list-style-type: dot;
    }
    .selecet_depart{
        touch-action: none;
        // -webkit-appearance: none;
        // line-height: 40px;
        // position: absolute;
        // right:20px;
        // margin-top: 1.5em;
        position: absolute;
        right:20px;
        display: inline-block;
        vertical-align: middle;
        /* 当成为行内块元素时它就可以垂直居中了 */
        width: 18px;
        height: 18px;
        -webkit-appearance: none;
        /* 清除原有的样式 */
        background-color: transparent;
        border: 0;
        outline: 0 !important;
        /* 去掉点击后外面可能会出现的蓝框 */
        line-height: 20px;
        color: #d8d8d8;
    }

    .selecet_depart:after{
         /* //在input的内容之后插入新内容 */
        position: absolute;
        top:12px;
        right:20px;
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        text-align: center;
        line-height: 14px;
        font-size: 14px;
        color: #fff;
        border: 3px solid #ddd;
        background-color: #fff;
        box-sizing: border-box;
        /* 规定两个并排的带边框的框 */
    }

    .selecet_depart:checked:after{
        /* 选中之后的样子 */
        position: absolute;
        content: "L";
        transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
        /* 2D变换旋转，还有平移和缩放，平时旋转用rotate，这个写法是比较复杂一点的写法，
        括号里面的六个值来得矩阵，实现2D变换，更详细的大家去百度查。 */
        -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
        border-color: #456de6;
        background-color: #456de6;
        position: absolute;
        right:20px;
    }
    
    .iconfont{
        margin-right: 0.5em;
        margin-left: 0.3em;
        font-size: 14px;
    }
</style>
